<template>
  <!-- <div class="cockpit" :style="{backgroundImage: `url(${require('@/assets/Image/cockpit-bg.png')})`}"> -->
  <div>
    <div class="dark-list">
      <a-row :gutter="60">
        <a-col :span="12">
          <h-list
            type="important"
            theme="dark"
            :hideToolTip="true"
            :data="importantData.filter((e, i) => i < 10)"
            :pagination="false"
            :hideMore="false"
            @detail="getNumberdetails"></h-list>
        </a-col>
        <a-col :span="12">
          <h-list
            type="important"
            theme="dark"
            :hideToolTip="true"
            :hideMore="false"
            :data="importantData.filter((e, i) => i >= 10)"
            :pagination="false"
            @detail="getNumberdetails"></h-list>
        </a-col>
      </a-row>
    </div>
    <p class="dark-back" @click="goback">返 回</p>
  </div>
</template>
<script>
import moment from 'moment';
import { getCockpitStressNumberEvent } from '@/api/serve';

export default {
  components: { },
  inject: ['updateTitle', 'getNumberdetails', 'goback'],
  data() {
    return {
      moment,
      show: false,
      reload: false,
      active: 0,
      importantData: [],
      id: ''
    };
  },
  beforeDestroy() {

  },
  created() {
    this.id = this.$route.query.id;
    this.getImpAccount();
    this.updateTitle('重点账号');
  },
  computed: {

  },
  methods: {
    // 重点账号
    getImpAccount(page) {
      getCockpitStressNumberEvent({
        eventId: this.id,
        pageNo: page || 1,
        pageSize: 20
      }).then(res => {
        this.importantData = res.data.records.map((e, i) => {
          return {
            ...e,
            account: e.name,
            order: i + (((page || 1) - 1) * 4) + 1,
            tag: e.label,
            createTime: e.reaseTime ? moment(e.reaseTime).format('MM-DD HH:mm') : ''
          };
        });
        // this.importantDataPage.total = res.data.total;
      });
    }
  }
};
</script>
<style lang="less" scoped>
  .cockpit {
    background-size: 100% 100%;
    background-position: top center;
    height: 1080px;
    position: relative;
    overflow: hidden;
    background-color: rgb(4,11,36);

    .hot-each {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
      position: relative;
      &:nth-child(5) {
        margin-top: 8px;
      }

      // &::before {
      //   content: ' ';
      //   position: absolute;
      //   width: 14px;
      //   height: 14px;
      //   border: 1px solid #5CA1F2;
      //   border-radius: 100%;
      //   left: 30px;
      // }
      // &::after {
      //   content: ' ';
      //   position: absolute;
      //   width: 1px;
      //   height: 43px;
      //   background: #395a81;
      //   left: 37px;
      //   top: 29px;
      // }
      // &:last-child {
      //   &::after {
      //     display: none;
      //   }
      // }

      .h-list--order-text {
        color: #fff;
        font-size: 15px;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background: #36414F;
        line-height: 20px;
        text-align: center;
        // font-weight: bold;
      }
      .h-list--order-1 {
        .h-list--order-text {
          background: #E19F29;
        }

      }
      .h-list--order-2 {
        .h-list--order-text {
          background: #85939F;
        }
      }
      .h-list--order-3 {
        .h-list--order-text {
          background: #B46949;
        }
      }
      .h-list--order-4 {
        .h-list--order-text {
          background: #36414F;
        }
      }
      .title {
        // height: 23px;
      }
      .h-list--order {
        height: 20px;
      }

      .hot-each--content {
        margin-left: 38px;
        width: 84%;
        h1 {
          width: 100%;
          font-size: 12px;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 24px;
          margin: 0;
          cursor: pointer;
          transition: all 0.3s;
          &:hover {
            color: #48AAFB;
          }
        }
        p {
          font-size: 12px;
          font-weight: 400;
          color: #CBCBCB;
          line-height: 24px;
          margin: 0;
        }
      }
    }

  }

</style>
<style lang="less">
  .dark-list {
    background: url('~@/assets/Image/dark-list.png');
    background-size: 100% 100%;
    width: 1570px;
    height: 700px;
    margin: 0 auto;
    padding: 30px 40px;
    box-sizing: border-box;
    .h-list-item.h-list-item-important.h-list-item--dark {
      margin-bottom: 12px;
      padding-bottom: 12px;
    }
    .h-list-item.h-list-item-important.h-list-item--dark h1.h1 > span {
      font-size: 14px;
    }
  }

</style>
